
const left_list = document.querySelector('.left_list')

const core_inner = document.querySelector('.core_inner')

//渲染左侧列表
fetch(`https://m.youxiake.com/api/m/v2/channel/confirm-calendar/product?page=0&monthDate=2025-08-01&classRegionId=2&startDate=&siteCode=1&refreshCount=1&hideLoading=`).then(res => res.json()).then(res1 => {
    // console.log(res1.data.filter.monthList)
    res1.data.filter.monthList.forEach((item, index) => {
        left_list.innerHTML += `
            <li onclick="change_left_list('${item.monthDate}')" ${index === 0 ? 'class="active"' : ''}>
                <p class="moonth">${item.monthLabel}</p>
                <p class="holiday">${item.holiday ? item.holiday : ''}</p>
            </li>
        `
    })
    left_list.innerHTML += `
        <li>
            <p class="more">更多</p>
            <p class="time">日期
                <span class="iconfont icon-youjiantou"></span>
            </p>
        </li>
    `
    //这里最优的解决方案是异步
    change_li = document.querySelectorAll('.left_list li')
}).catch(err => {
    console.log(err)
})
//左侧列表点击事件
let Scrollmonth = ''
const change_left_list = (month) => {
    Scrollmonth = month
    core_inner.innerHTML =''
    getList(month)
    change_li.forEach(item => {
        item.classList.remove('active')
    })
    const targetLi = event.target.closest('li');
    if (targetLi) {
        targetLi.classList.add('active'); // 给li加active
    }
}

//渲染列表
const getList = (data = '2025-09-01', page = 0) => {
    let str = ''
    let str1 = ''
    fetch(`https://m.youxiake.com/api/m/v2/channel/confirm-calendar/product?page=${page}&monthDate=${data}&classRegionId=3&startDate=&siteCode=1&refreshCount=1&hideLoading=`).then(res => res.json()).then(res1 => {
        res1.data.dataList.list.forEach(item => {
            // console.log(res1.data.dataList.list)
            //渲染查看更多内容
            item.batchList.forEach(item1 => {
                str += `
                    <li>
                        <div class="data">
                            <span class="numb">${item1.startLabel2}</span>
                            <span class="week">${item1.startWeekLabel}</span>
                            <span class="numb">${item1.endLabel2}</span>
                        </div>
                        <p class="price">￥${item1.priceLabel}</p>
                        <div class="LinePackage">${item1.statusLabel}</div>
                    </li>
            `
            })
            if (item.productRank) {
                str1 = `
                    <div class="order">
                        <img class="order_img" src="https://m.youxiake.com/20250820155903/img/domestic.a037d309.png">
                            <span>${item.productRank.rankDesc}</span>
                            <img class="arrow" src="https://m.youxiake.com/20250820155903/img/arrow.87ac14bd.png">
                    </div>
                `
            }
            //渲染核心内容
            core_inner.innerHTML += `
                    <li>
                        <img class="maximg"
                            src="${item.image}">
                        <div class="intro">
                            <div class="intro_top">
                                <span class="sp1">跟美团</span>
                                <span class="sp2">美景探索</span>
                                <span class="sp3">${item.daysNights}</span>
                                <span class="sp4">${item.people}</span>
                            </div>
                            ${str1}
                            <div class="list_tit">
                                ${item.title}
                            </div>
                            <div class="list_sub">
                                ${item.subTitle}
                            </div>
                            <div class="Scroll">
                                <ul class="packageScroller">
                                   ${str}
                                </ul>
                                <div class="LinePackage__more">
                                    <span>查</span>
                                    <span>看</span>
                                    <span>更</span>
                                    <span>多</span>
                                    <div class="Line__package__moreTag"></div>
                                </div>
                            </div>

                        </div>
                    </li>
                `
        })
    }).catch(err => {

    })
}
getList()
layui.use('flow', function () {  // 修正模块引入方式
    var flow = layui.flow;
    flow.load({
        elem: core_inner,  // 绑定到实际滚动容器
        isAuto: true,
        scrollElem: core_inner,  // 监听实际滚动容器的滚动
        done: function (page, next) {
            // 模拟数据插入
            setTimeout(function () {
                var lis = [];
                getList(Scrollmonth,page)
                next(lis.join(''), page < 10);
            }, 500);
        }
    });
});
